<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .modal-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, .2);
            transition: opacity 300ms ease;
            opacity: 0;
            z-index: -9999;
        }
        .modal-wrapper.active {
            opacity: 1;
            z-index: 99;
        }
        .modal {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 200px;
            background-color: white;
            box-shadow: 0 0 7px #eee;
            box-sizing: border-box;
            display: grid;
            padding: 16px;
            grid-template-columns: 80px 1fr;
            grid-template-rows: repeat(4, 1fr);
        }
        .input-wrapper {
            padding: 8px 0px;
        }
        .loading {
            display: block;
        }
        table {
            display: none;
        }
    </style>
</head>
<body>
    <input id="search-input" type="text">
    <button id="search-btn">搜索</button>
    <button id="add-btn">添加</button>

    <div class="modal-wrapper">
        <div class="modal">
            <div class="input-wrapper">
                书名
            </div>
            <div class="input-wrapper">
                <input id="bookname" type="text">
            </div>
            <div class="input-wrapper">
                作者
            </div>
            <div class="input-wrapper">
                <input id="author" type="text">
            </div>
            <div class="input-wrapper">
                出版社
            </div>
            <div class="input-wrapper">
                <input id="publisher" type="text">
            </div>
            <div class="input-wrapper">
                <button id="close-modal">关闭</button>
            </div>
            <div class="input-wrapper">
                <button id="ok">确认</button>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="loading">loading...</div>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>

    <script src="./jq.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        const BASE_URL = 'http://www.liulongbin.top:3006';

        // 删
        async function del () {
            /**
             * 1. 请求前：
             *   1.1 换loading... 
             *   1.2 disable（防止用户频繁操作）
             * 2. 发请求
             * 3. 请求返回之后：
             *   3.1 成功失败提示
             *   3.2 置回请求前的操作
             *   3.3 重新执行查询操作
            */
            $(this)
                .attr('disabled', true)
                .text('删除中...');
            const id = Number($(this).attr('data-id'));
            const res = await axios({
                method: 'GET',
                url: BASE_URL + '/api/delbook',
                params: { id },
            });
            if (res.data.status < 300) {
                console.log(res.data.msg);
                search(true);
            } else {
                $(this).attr('disabled', false);
                $(this).text('删除');
            }
        }

        // 查
        async function search (isInit = false) {
            $('.loading').show();
            $('table').hide();
            const res = await axios.get('http://www.liulongbin.top:3006/api/getbooks', isInit ? {} : {
                params: { author: $('#search-input').val() },
            });
            $('.loading').hide();
            $('table').show();
            render(res.data.data);
        }

        // 增
        async function add () {
            $(this)
                .text('添加中...')
                .attr('disabled', true);

            const res = await axios({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/addbook',
                data: {
                    bookname: $('#bookname').val(),
                    author: $('#author').val(),
                    publisher: $('#publisher').val(),
                },
            });
            
            $(this)
                .text('确认')
                .attr('disabled', false);

            if (res.data.status === 201) {
                close();
            }
            console.log(res.data.msg);
            search(true);
        }

        function close () {
            $('.modal-wrapper').removeClass('active');
        }

        function open () {
            $('.modal-wrapper').addClass('active');
        }

        function render (data) {
            const tbody = $('tbody').empty();
            for (const item of data) {
                const tr = $(`
                    <tr>
                        <td>${ item.id }</td>
                        <td>${ item.bookname }</td>
                        <td>${ item.author }</td>
                        <td>${ item.publisher }</td>
                        <td><button class="del" data-id="${ item.id }">删除</button></td>
                    </tr>
                `);
                tbody.append(tr);
            }

            $('.del').on('click', del);
        }

        search(true);

        $('#search-btn').on('click', () => search());
        $('#add-btn').on('click', open);
        $('.modal-wrapper').on('click', (e) => {
            if (!$(e.target).attr('class')?.includes('modal-wrapper')) {
                return;
            }
            close();
        });
        $('#close-modal').on('click', close);
        $('#ok').on('click', add);

    </script>
</body>
</html>
